import React ,{Suspense} from 'react'
import routes from "./Router_config"
import {RouterItem,RouterList} from "../utils/index"
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate
} from "react-router-dom"


type Props = {}

const Router_view = (props: Props) => {
  const renderRouter = (arr:RouterList) => {
    return arr.map((item:RouterItem,index:number)=>{
      return <Route
      key={index}
      path={item.path}
      element={item.to?<Navigate to={item.to}/>:<item.element/>}
      >
        {
          item.children && renderRouter(item.children)
        }
      </Route>
    })
  }
  return (
    <Suspense fallback={<>路由加载中...</>}>
      <BrowserRouter>
        <Routes>
          {
            renderRouter(routes)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default Router_view